<template>
<div>
  <div class='banner' @click="handleClickBanner">
      <img class="banner-img" :src="bannerImg">
    <div class="banner-info">
        <div class="banner-title">
            {{this.sightName}}
        </div>
        <div class="banner-number">
            <span class="iconfont icontupiancopy banner-icon"></span>
            {{this.bannerImgs.length}}
        </div>
    </div>
  </div>
  <common-garray 
    :imgs='bannerImgs' 
    v-show="showGarray"
    @close='handleGarrayClose'
  >
  </common-garray>
</div>
</template>

<script>
import CommonGarray from 'common/gallary/Garray'
export default {
    name:'DetailBanner',
    props:{
        sightName:String,
        bannerImg:String,
        bannerImgs:Array
    },
    data(){
        return{
            showGarray:false,
            // imgs:[
            //     'http://img1.qunarzz.com/sight/p0/1503/fe/fe5c99cd2e6f7595.water.jpg_350x240_7825760a.jpg',
            //     'http://img1.qunarzz.com/sight/p0/1503/55/5577ab22b2e205d0.water.jpg_350x240_4477a60d.jpg'
            // ]
        }
    },
    components:{
        CommonGarray
    },
    methods:{
        handleClickBanner(){//点击图片显示garray组件
            this.showGarray=true;
        },
        handleGarrayClose(){//点击garray组件任何区域(拖动图片不会触发，可能是触发事件不同吧)，garray隐藏
            this.showGarray=false;
        }
    }
}
</script>

<style scoped>
.banner{
    position: relative;
    overflow: hidden;
    height:0;
    padding-bottom: 55%;
    color: #fff;
}
.banner-img{
    width:100%;
}
.banner-info{
    display: flex;
    position: absolute;
    left:0;
    right: 0;
    bottom: 0;
    line-height: 0.6rem;
    background-image: linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.8));
}
.banner-title{
    flex:1;
    font-size:0.32rem;
    padding:0 0.2rem;
}
.banner-number{
    margin-top:0.14rem;
    padding:0 0.4rem;
    line-height: 0.32rem;
    height: 0.32rem;
    border-radius: 0.2rem;
    background: rgba(0,0,0,0.8);
    font-size: 0.24rem;
}
.banner-icon{
    font-size: 0.24rem;
}
</style>